<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/three/static/h-ui/css/H-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/css/H-ui.admin.css" />
		<link rel="stylesheet" type="text/css" href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
		<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/css/style.css" />
		<script type="text/javascript" src="/three/lib/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
		<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
		<script type="text/javascript" src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
		<script type="text/javascript" src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
		<script type="text/javascript" src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>

<script type="text/javascript">     
$(document).ready(function(){
	 $(':input','#form1')

	        .not(':button,:submit,:reset,:hidden')   //将myform表单中input元素type为button、submit、reset、hidden排除

	        .val('')  //将input元素的value设为空值

	        .removeAttr('checked')

	        .removeAttr('selected') // 如果任何radio/checkbox/select inputs有checked or selected 属性，将其移除 
	 
	  $("input[name=qx]").click(function(){
		  if(this.checked==false){
			  $("input[name=cx]").prop("checked",false);
		  }else{
			  $("input[name=cx]").prop("checked",true);
		  }
	  });
	
	 $("#sender").click(function(){
		  var check=$("input[name=cx]:checked");//选中的复选框   
		  var a = "";
		  var aa ="";
		  var b="";
		  check.each(function(obj,index){       
		         
		 	 var row=$(this).parent("td").parent("tr");          
		 	 var username=row.find("[name='username']").html();//注意html()和val()         
		 	 var openid=row.find("[name='openid']").html();
		 	 var userId=row.find("[name='userId']").html();
		 	 $("#senduser").val(username);
		 	 $("#customUserId").val(openid);
		 	 
		 	aa += username+",";
		 	 a += openid+",";
		 	 b+=userId+",";
		   });  

		   aa=aa.substr(0,aa.length-1);
         a=a.substr(0,a.length-1);
	       $("#senduser").val(aa);	   
		   $("#customUserId").val(a);
		   $("#userId").val(b);
		   $("input=[name=cx]").prop("checked",false);
		   $("input=[name=qx]").prop("checked",false);
	 });
	 $("#message").click(function(){
		  $("#form1").attr("action","/three/sms/wecahtAdd");
		  $("#form1").submit();
	 });
	 $("#empty").click(function(){
		 $("#senduser").val("");
		 $("#content").val("");
		 $("#qmobile").val("");
		 $("#qusername").val("");
		 $("input[name=cx]").prop("checked",false);
	 });
});
function thequery(){
	 $("#tb").empty();
	 var qusername=$("#qusername").val();
	 var qmobile=$("#qmobile").val();
	  $.ajax({
	 	   type: "POST",
	 	   dataType:'json',
	 	   url: "/three/sms/userList",
	 	   data: {"qusername":qusername,"qmobile":qmobile},
	 	   success: function(data){
	 	      $.each(data,function(index,obj){
	 	    	  if(obj.sex==1){
	 	    		  obj.sex="男";
	 	    	  }else if(obj.sex==2){
	 	    		  obj.sex="女";
	 	    	  }else{
	 	    		 obj.sex="保密";
	 	    	  }
	 	    	 $("#tb").append("<tr align='center'><td>"+(index+1)+"</td><td><input type='checkbox' name='cx'></td><td name='userId'>"+obj.customUserId+"</td><td>"+obj.mobile+"</td><td name='username'>"+obj.username+"</td><td>"+obj.openid+"</td></tr>");
	 	      })
	 	   }
	 	});
 }
$(document).ready(function(){
	$('.table-sort').dataTable({
		"aaSorting": [[ 4, "desc" ]],//默认第几个排序
		"bStateSave": true,//状态保存
		"pading":false,
		"aoColumnDefs": [
		  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
		  {"orderable":false,"aTargets":[0,5]}// 不参与排序的列
		]
	});
});
</script>
</head>
<body>
<form action="/three/sms/wechatshow" method="post" id="form1">
<br>
<table class="table table-bg">
			<tr class="text-c">
				<td align="right">收件人:</td>
				<td><input type="text" name="qusername" value="${qusername }" class="input-text"></td>
				<td align="right">收件人账号:</td>
				<td><input type="text" name="qmobile" value="${qmobile }" class="input-text"></td>
				<td align="right">内容:</td>
				<td><input type="text" name="qcontent" value="${qcontent }" class="input-text"></td>
				<td align="right">发送时间:</td>
				<td>
				<input type="date" name="qsend" value="${qsend }" class="input-text Wdate" style="width:160px;">至:
				<input type="date" name="qend" value="${qend }" class="input-text Wdate" style="width:160px;">
				</td>
				<td><button type="submit"  class="btn btn-success"><i class="Hui-iconfont">&#xe665;</i>查询</button></td>
				
			</tr>
		</table>
<!-- Button trigger modal -->
<a class="btn btn-primary radius" data-toggle="modal" data-target="#myModal" id="empty"><i class="Hui-iconfont">&#xe600;</i>发送信息</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog" style="width: 888px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">发送信息</h4>
      </div>
      <div class="modal-body">
        <table width="100%" border="1"  bordercolor="#a0c6e5" style="border-collapse:collapse;" height="360" class="table table-border table-bordered table-hover table-bg">
			<tr class="text-c">
				<td align="right" width="99">发送用户:</td>
				<td>
				<input type="hidden" id="customUserId" name="customUserId">
				<input type="hidden" id="userId" name="userId">
				<textarea rows="9" cols="90" style="background-color: MintCream; resize:none;" id="senduser" name="senduser" readonly="readonly">			
				</textarea>
				</td>
				<td width="210">
				<!-- 选择用户（开始） -->
				<!-- Button trigger modal -->
				
			<a class="btn btn-primary radius" data-toggle="modal" data-target="#Modal" id="content">选择用户</a>
			<!-- Modal02 state -->
		<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog" style="width: 800px;">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		       <h4 class="modal-title" id="ModalLabel">选择发送用户</h4>
		      </div>
		      <div class="modal-body" align="center">
		         <table style="text-align: center;" class="table table-border table-bordered table-hover table-bg">
		            <tr class="text-c">
					     <td><b>手机号:</b></td>
					      <td><input type="text" class="input-text" name="qmobile" id="qmobile" style="width:150px"></td>
					       <td><b> 姓名:</b></td>
					      <td><input type="text" class="input-text" name="qusername" id="qusername" style="width:150px"></td>
							<td>&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-success" onclick="thequery()"><i class="Hui-iconfont">&#xe665;</i>查询</button>
								 <button type="reset" class="btn btn-success" id="resetBut" name=""><i class="Hui-iconfont">&#xe68f;</i>重置 </button>
					        </td>
		       </tr>
		       </table>
		       <div style="height: 20px"></div>
		          <table width="100%" bordercolor="#a0c6e5" style="border-collapse:collapse;" height="130"  class="table table-border table-bordered table-hover table-bg">
					<thead>
						<tr align="center" class="text-c">
									<td width="5%"></td>
									<td width="5%"><input type="checkbox" name="qx"></td>
									<td width="15%">会员号</td>
									<td width="15%">手机</td>
									<td width="10%">姓名</td>
									<td width="35%">openid</td>
								</tr>
					</thead>
					<tbody id="tb">
					<c:forEach items="${cList }" var="c" varStatus="s">
								<tr align="center" class="text-c">
									<td>${s.index+1 }</td>
									<td><input type="checkbox" name="cx"></td>
									<td name="userId">${c.customUserId }</td>
									<td>${c.mobile }</td>
									<td name="username">${c.username }</td>
									<td name="openid">${c.openid }</td>
								</tr>
								</c:forEach>
					</tbody>
				</table>
		      </div>
		      <div class="modal-footer">
		        <div>   
		            <button type="button"  data-toggle="modal" data-target="#Modal" class="btn btn-default">关闭</button>
		            <button type="button"  data-toggle="modal" data-target="#Modal" id="sender" class="btn btn-primary">确认</button>
		        </div>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- Modal02 end -->
				</td>
			</tr>
			<tr class="text-c">
				<td align="right" >内容:</td>
				<td>
				<textarea rows="9" cols="90" style="background-color: Linen; resize:none;" name="content" id="content"></textarea>
				</td>
				<td>长短信按62个字符每条短信扣取</td>
			</tr>
		</table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="message">发送</button>
      </div>
    </div>
  </div>
</div>
<table border="1" width="100%" lay-size="sm" class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr align="center" class="text-c">
<td></td>
<td>收件人</td>
<td>收件人账号</td>
<td>内容</td>
<td>发送时间</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<c:forEach items="${list }" var="list" varStatus="s">
<tr align="center" class="text-c">
<td>${s.index+1 }</td>
<td>${list.nikename }</td>
<td>${list.mobile }</td>
<td width="36%">${list.content }</td>
<td><f:formatDate value="${list.send_time }" pattern="yyyy-MM-dd"/></td>
<td><a href="/three/sms/deleteWechat?recordId=${list.record_id }" class="btn btn-danger radius" role="button"><i class="Hui-iconfont">&#xe6e2;</i>删除</a></td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
</body>
</html>